<template>
   <div class="addMask">
      <el-dialog v-model="dialogVisible" title="修改密码" width="500">
         <h2 class="login-title">后台管理系统修改密码</h2>
         <el-form :model="form" status-icon ref="loginFormRef" class="center-form" :rules="rules">
            <el-form-item prop="old_password">
               <el-input v-model="form.old_password" placeholder="请输入原密码" class="input-number" show-password
                  style="width: 300px; border-radius: 10px; background-color: #f3f6f8" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="new_password">
               <el-input v-model="form.new_password" placeholder="请输入新密码" class="input-number" show-password
                  style="width: 300px; border-radius: 10px; background-color: #f3f6f8" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="new_password_repeat">
               <el-input v-model="form.new_password_repeat" type="password" ref="passwordInput" class="input-number"
                  show-password style="width: 300px; background-color: #f3f6f8" placeholder="请确认新密码"
                  @change="validateConfirmPassword"></el-input>
            </el-form-item>
            <el-form-item class="center-button">
               <el-button @click="handleSubmit" :loading="loading" style="width: 300px; background-color: #73c695"
                  class="center-button">
                  提交</el-button>
            </el-form-item>
         </el-form>
      </el-dialog>
   </div>
</template>

<script setup>
import { ref } from "vue";
import api from "@/api";
import { ElMessage } from "element-plus";

const dialogVisible = ref(false);
const loading = ref(false);

const handleDialog = () => {
   dialogVisible.value = !dialogVisible.value;
   form.value.new_password = "";
   form.value.new_password_repeat = "";
   form.value.old_password = "";
};

// 表单数据
const form = ref({
   new_password_repeat: "",
   new_password: "",
   old_password: "",
});

// 验证码相关状态
const isCodeSent = ref(false);
// 倒计时
const countdown = ref(5);
// 获取本地存储的原密码
const old_passwords = localStorage.getItem("password");

// 自定义验证规则：确认密码是否与新密码一致
const validateConfirmPassword = (rule, value, callback) => {
   // 如果输入的原密码与本地存储的原密码不一致，则提示错误
   if (old_passwords != form.value.old_password) {
      console.log(old_passwords, form.value.old_password);
      callback(new Error("原密码不正确"));
   }

   if (value !== form.value.new_password) {
      callback(new Error("两次输入的密码不一致"));
   }
   return;
};

// 表单验证规则
const rules = {
   new_password: [
      { required: true, message: "请输入新密码", trigger: "blur" },
      { min: 6, max: 20, message: "密码长度在 6 到 20 个字符", trigger: "blur" },
   ],
   new_password_repeat: [
      { required: true, message: "请输入新密码", trigger: "blur" },
      { validator: validateConfirmPassword, trigger: "blur" },
   ],
   verificationCode: [
      { required: true, message: "请输入验证码", trigger: "blur" },
      { len: 6, message: "验证码长度为 6 位", trigger: "blur" },
   ],
};

// 发送验证码消息
// const getVerificationCode = () => {
//     if (form.value.new_password !== form.value.new_password_repeat) {
//         ElMessage.error('两次输入密码不一致，请检查您输入的密码')
//         return;
//     }

//     isCodeSent.value = true

//     let time = setInterval(() => {
//         countdown.value--
//         if (countdown.value <= 0) {
//             clearInterval(time)
//             isCodeSent.value = false
//             countdown.value = 5
//         }
//     }, 1000)
// }

// 修改密码
const updatepasswordData = async () => {
   try {
      loading.value = true;
      const res = await api.login.update({
         old_password: form.value.old_password,
         new_password: form.value.new_password,
         new_password_repeat: form.value.new_password_repeat,
      });

      if (res.code === 200) {
         ElMessage.success("密码修改成功");
         handleDialog();
         localStorage.setItem("password", form.value.new_password);
      } else {
         ElMessage.error(res.msg || "密码修改失败");
      }
   } catch (error) {
      console.error("密码修改失败:", error);
      ElMessage.error("密码修改失败，请稍后再试");
   } finally {
      loading.value = false;
   }
};

// 提交表单
const formRef = ref(null);
const handleSubmit =  () => {

    updatepasswordData();


};

defineExpose({
   handleDialog,
});
</script>

<style lang="scss" scoped>
.login-container {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   background-color: #f0f0f0;
}

.login-box {
   width: 300px;
   padding: 20px;
   background-color: #fff;
   border-radius: 30px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.login-title {
   text-align: center;
   margin-bottom: 20px;
}

.center-form {
   display: flex;
   flex-direction: column;
   align-items: center;
   /* 使子元素水平居中 */
}

.center-button {
   height: 40px;
   display: flex;
   justify-content: center;
   /* 使按钮水平居中 */
   margin-top: 5px;
   border-radius: 10px;
   /* 添加一些顶部间距 */
   color: #fff;
}

.input-number {
   border-radius: 10px;
   height: 40px;
   justify-content: center;
}
</style>
